<template>
	<view>
		<view class="screen">
			<view :class="{'screen_active':current==item.id}" @click="changeCurr(item.id)" v-for="item in currList">{{item.name}}</view>
		</view>
		<view class="clist" v-if="list&&list.length>0">
			<view class="citem" @click="$navTo('/pages/user/cardDetail?id='+item.id)" v-for="item in list">
				<view class="logo">
					<image :src="item.thumb"></image>
				</view>
				<view class="content">
					<view>{{item.supname}}</view>
					<view>{{item.title}}</view>
					<view class="number">剩余次数：{{item.checknum}}</view>
				</view>
				<view class="date">使用有效期: {{item.endtime}}</view>
				<view class="status effective" v-if="item.status==1">{{item.statusstr}}</view>
				<view class="status expire" v-if="item.status==-1">{{item.statusstr}}</view>
			</view>
			<view class="empty_loading">
				<image v-show="isloading" src="../../static/business/loading.gif" mode=""></image>
				<text v-show="isempty">没有更多了~</text>
			</view>
		</view>
		<view v-else class="none_data">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				isempty: false,
				isloading: false,
				page: 0,
				current: 0,
				currList: [
					{id: 0, name: '可使用'},
					{id: 1, name: '不可用'},
				]
			};
		},
		onLoad(){
			this.getList();
		},
		methods: {
			getList(){
				this.isloading = true;
				this.isempty = false;
				this.page++;
				this.$axios('card/lists','POST','order',{
					page: this.page,
					status: this.current
				}).then(res=>{
					this.isloading = false;
					if(res.data.code==200){
						this.list = [...this.list, ...res.data.data];
						this.isempty = res.data.data.length <= 0;
					}
				})
			},
			changeCurr(id){
				if(id==this.current) return;
				this.current = id;
				this.list = [];
				this.page = 0;
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
.screen{
	background: #f1f1f1;
	line-height: 3;
	display: flex;
	justify-content: space-between;
	color: #5f5d5d;
	border: 1rpx solid #f1f1f1;
	view{
		width: 50%;
		text-align: center;
	}
}
.screen_active{
	display: flex;
	flex-direction: column;
	align-items: center;
	color: $bg-color;
	background: #fff;
	&::after{
		content: '';
		width: 40rpx;
		height: 5rpx;
		background: $bg-color;
		display: block;
		margin-top: -5rpx;
	}
}
.clist{
	padding: 30rpx 20rpx;
	.citem{
		width: 100%;
		height: 140rpx;
		display:flex;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		align-items: center;
		color: #fff;
		padding: 0 20rpx;		
		background-position: right;
		position: relative;
		background-image: url('https://img.jinghushi.com/images/9/2024/01/xy4Je4dyddYdJRAayJy5UJ54RIZHYD.jpg');
		// background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);
		.logo{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 20rpx;
			border: 4rpx solid #fff;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content{
			flex: 1;
			line-height: 1.6;
			.number{
				font-size: 24rpx;
			}
		}
		.date{
			font-size: 22rpx;
			position: absolute;
			right: 15rpx;
			bottom: 10rpx;
		}
		.status{
			padding: 5rpx 10rpx;
			color: #fff;
			font-size: 24rpx;
			position: absolute;
			right: 15rpx;
			top: 20rpx;
			border-radius: 8rpx;
			    opacity: 0.9;
		}
		.effective{
			background: #17a362;
		}
		.expire{
			background: #aa0000;
		}
	}
}
</style>
